<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate" />

<ng-template #customCellTemplate let-day="day" let-locale="locale">
  <div class="cal-cell-top">
    @if (day.badgeTotal > 0) {
    <span class="cal-day-badge">{{ day.badgeTotal }}</span>
    }
    <span class="cal-day-number"
      >{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
    >
  </div>
  <div class="cell-totals">
    @for (group of day.eventGroups; track group) {
    <span class="badge text-bg-{{ group[0] }}"> {{ group[1].length }} </span>
    }
  </div>
</ng-template>

<ng-template
  #customEventTemplate
  let-weekEvent="weekEvent"
  let-tooltipPlacement="tooltipPlacement"
  let-eventClicked="eventClicked"
  let-tooltipTemplate="tooltipTemplate"
  let-tooltipAppendToBody="tooltipAppendToBody"
  let-tooltipDisabled="tooltipDisabled"
  let-tooltipDelay="tooltipDelay"
  let-column="column"
>
  <ng-template #groupedEventsTemplate>
    <div style="min-width: 150px">
      @for (event of weekEvent.event.meta.groupedEvents; track event) {
      <div>
        <mwl-calendar-event-actions [event]="event" />
        &ngsp;
        <mwl-calendar-event-title [event]="event" view="week" />
      </div>
      }
    </div>
  </ng-template>

  <div
    [ngbPopover]="groupedEventsTemplate"
    [disablePopover]="!weekEvent.event.meta.groupedEvents"
    class="cal-event"
    [ngStyle]="{
          color: weekEvent.event.color?.secondaryText,
          backgroundColor: weekEvent.event.color?.secondary,
          borderColor: weekEvent.event.color?.primary
        }"
    [mwlCalendarTooltip]="
          !tooltipDisabled && !weekEvent.event.meta.groupedEvents
            ? (weekEvent.event.title
              | calendarEventTitle: 'weekTooltip':weekEvent.event)
            : ''
        "
    [tooltipPlacement]="tooltipPlacement"
    [tooltipEvent]="weekEvent.event"
    [tooltipTemplate]="tooltipTemplate"
    [tooltipAppendToBody]="tooltipAppendToBody"
    [tooltipDelay]="tooltipDelay"
    (mwlClick)="eventClicked.emit()"
  >
    @if (!weekEvent.event.meta.groupedEvents) {

    <mwl-calendar-event-actions [event]="weekEvent.event" />
    &ngsp; }
    <mwl-calendar-event-title [event]="weekEvent.event" view="week" />
  </div>
</ng-template>

<div>
  @switch (view) { @case ('month') {
  <mwl-calendar-month-view
    [viewDate]="viewDate"
    [events]="events"
    [cellTemplate]="customCellTemplate"
    (beforeViewRender)="beforeMonthViewRender($event)"
    [activeDayIsOpen]="true"
  />
  } @case ('week') {
  <mwl-calendar-week-view
    [viewDate]="viewDate"
    [events]="groupedSimilarEvents"
    [eventTemplate]="customEventTemplate"
  />
  } @case ('day') {
  <mwl-calendar-day-view
    [viewDate]="viewDate"
    [events]="groupedSimilarEvents"
    [eventTemplate]="customEventTemplate"
  />
  } }
</div>
